<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>员工年龄统计</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%@ include file="/WEB-INF/view/common.jsp"%>

<link
	href="${path }/resources/css/plugins/bootstrap-table/bootstrap-table.min.css"
	rel="stylesheet">
<link href="${path }/resources/css/animate.css" rel="stylesheet">
<link href="${path }/resources/css/style.css?v=4.1.0" rel="stylesheet">

</head>
<body class="gray-bg">
	<div class="panel-body">
        <div class="row" id="mid" style="width:1200px;height:600px;"></div>

	</div>

    <!--echarts-->
    <script src="${path}/resources/js/echarts.js"></script>
	<script type="text/javascript">
		$(function () {
			init();
		});

		var init = function () {
			$.ajax({
				url:"tongji",
				dataType:"json",
				type:"post",
				success:function(res){
					if(res.success){
						var slist =res.list;
						var xdata=[];
						var ydata =[];
						for (var i = 0;  i< slist.length; i++) {
							xdata[i]=slist[i].mname;
							ydata[i]=slist[i].num;
						}
						$(function(){//文档就绪函数
							//基于准备好的dom，初始化echarts实例
							var myChart = echarts.init(document.getElementById('mid'));

							// 指定图表的配置项和数据
							var option = {
								title: {
									text: '员工年龄统计',
									left: 'left'
								},
								tooltip: {},
								legend: {
									data:['数量']
								},
								xAxis: {
									data: xdata
								},
								yAxis: {},
								series: [{
									name: '数量',
									type: 'bar',
									data: ydata
								}]
							};

							// 使用刚指定的配置项和数据显示图表。
							myChart.setOption(option);

						});
					}else{
						alert("处理失败!");
					}
				}
			});
		};
	</script>

</body>
</html>